<!--
Copyright 2015 Google Inc. All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
file except in compliance with the License. You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
ANY KIND, either express or implied. See the License for the specific language governing
permissions and limitations under the License.
-->
<!--
The 'google-map-scene' is contained inside a 'google-map-storyboard'.

Each scene is associated with a given location (an address).
It uses Geocoding to accquire the locations of scenes and therefore uses
Geocoding quota.
The child nodes of each scene (ie. scene content) are rendered at this location.

<b>Example</b> Simple scene - no zoom and no content given:

    <google-map-scene address="Sydney, Australia">
    </google-map-scene>

<b>Example</b> Text content on a scene and a zoom level:

    <google-map-scene address="Sydney, Australia" zoom="5">
      <div>Welcome to Sydney!</div>
    </google-map-scene>

<b>Example</b> Image content on a scene and multiple pieces of content:

    <google-map-scene address="Sydney, Australia">
      <div>Welcome to Sydney!</div>
      <img src="image1.png">
      <div>Sydney is the capital of New South Wales, Australia.</div>
      <img src="image2.png">
    </google-map-scene>


@element google-map-scene
@homepage https://github.com/googlemaps/google-map-storyboard
-->
<!--
Fired when the scene's location or address has been changed.

@event scene-changed
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../google-apis/google-apis.html">

<polymer-element name="google-map-scene" attributes="address zoom">
<template>
  <style>
    :host {
      display: none;
    }
  </style>

</template>

<script>
  Polymer({

    /**
     * The address associated with the scene.
     *
     * @attribute {address}
     * @type {string}
     * @default {null}
     */
    address: null,

    /**
     * The zoom of the map.
     *
     * @attribute {zoom}
     * @type {number}
     * @default {null}
     */
    zoom: 10,

    /**
     * The location of the scene.
     *
     * @property {location}
     * @type {google.maps.LatLng}
     * @default {null}
     */
    location: null,

    /**
     * The marker for this scene.
     *
     * @property {marker}
     * @type {google.maps.Marker}
     * @default {null}
     */
    marker: null,

    /**
     * If true, geocode the address again and ignore the current once.
     *
     * @property {ignoreAddress}
     * @type {boolean}
     * @default {true}
     */
    ignoreAddress: true,

    setMap: function(map) {
      if (this.marker) this.marker.setMap(map);
    },

    getStoryboard: function() {
      var storyboard = this.parentNode;
      return storyboard;
    },

    addressChanged: function() {
      this.ignoreAddress = !this.address;
      this.fireSceneChanged();
    },

    locationChanged: function() {
      if (!this.marker) this.makeMarker();
      this.marker.setPosition(this.location);
      this.fireSceneChanged();
    },

    fireSceneChanged: function() {
      this.fire('scene-changed');
    },

    makeMarker: function() {
      this.marker = new google.maps.Marker({
        map: null,
        location: this.location
      });
    },

    warn: function() {
      console.warn.apply(console, Array.prototype.slice.call(arguments));
      this.fireSceneChanged();
    }

  });
</script>
</polymer-element>
